// TODO 需要大幅重构， 将画布和取色分离开，这个脚本控制渲染
cc.Class({
    extends: cc.Component,

    properties: {

    },

    onLoad() {
        let scene = cc.director.getScene()
        this.canvas = scene.getChildByName('Canvas')
        this.graphics = this.node.getComponent(cc.Graphics)

        this.isMouseDown = false

        this.drawColor = cc.color(0, 162, 188, 255)
        this.lastGrid = cc.v2(0, 0)
    },

    start() {
        this.pixelCanvas = this.node.getComponent('canvasWapper').pixelCanvas
        this.canvasWapper = this.node.getComponent('canvasWapper')
        this.colorBox = this.node.getComponent('colorSlider').colorSlider
        this.colorWapper = this.node.getComponent('colorSlider')

        this.addEventListen()
    },

    // 添加事件监听
    addEventListen() {
        const pointWindowToCanvas = (point) => cc.v2(point.x - this.canvas.width / 2, point.y - this.canvas.height / 2)
        this.canvas.on(cc.Node.EventType.MOUSE_DOWN, (e) => {
            // console.log(e)
            this.isMouseDown = true
            let point = pointWindowToCanvas(cc.v2(e._x, e._y))

            let pc = this.pixelCanvas
            let isClickCanvas = pc.pointInCanvas(point)

            let cb = this.colorBox
            let isClickColorBox = cb.pointInBox(point)
            let isClickColorBar = cb.pointInBar(point)

            // console.log('box, bar', isClickColorBox, isClickColorBar)
            if (isClickColorBar) {
                cb.changeH(point)
                this.updateCanvas()
            }
            if (isClickColorBox) {
                cb.changeCurrentColor(point)
                this.drawColor = cb.getCurrentColor()
                this.updateCanvas()
            }
            // console.log('isclickMap:', isClickCanvas, point)
            if (isClickCanvas) {
                let grid = pc.positionToGrid(point)
                let index = pc.gridToindex(grid)
                this.lastGrid = grid
                pc.pixelSetColor(index, this.drawColor)
                this.updateCanvas()
            }
        })

        this.canvas.on(cc.Node.EventType.MOUSE_MOVE, (e) => {
            // console.log(e)
            if (!this.isMouseDown) {
                return
            }

            let point = pointWindowToCanvas(cc.v2(e._x, e._y))

            let pc = this.pixelCanvas
            let isClickCanvas = pc.pointInCanvas(point)

            let cb = this.colorBox
            let isClickColorBox = cb.pointInBox(point)
            let isClickColorBar = cb.pointInBar(point)

            // console.log('box, bar', isClickColorBox, isClickColorBar)
            if (isClickColorBar) {
                cb.changeH(point)
                this.updateCanvas()
            }
            if (isClickColorBox) {
                cb.changeCurrentColor(point)
                this.drawColor = cb.getCurrentColor()
                this.updateCanvas()
            }
            // console.log('isclickMap:', isClickCanvas, point)
            if (isClickCanvas) {
                let grid = pc.positionToGrid(point)
                if (grid.x == this.lastGrid.x && grid.y == this.lastGrid.y) {
                    return
                }
                let index = pc.gridToindex(grid)
                pc.pixelSetColor(index, this.drawColor)
                this.updateCanvas()
            }
        })

        this.canvas.on(cc.Node.EventType.MOUSE_UP, (e) => {
            // console.log(e)
            this.isMouseDown = false
        })
    },

    clear() {
        let g = this.graphics
        g.clear()
    },

    updateCanvas() {
        this.clear()
        this.canvasWapper.updateCanvas()
        this.colorWapper.drawSlider()
    }

    // update (dt) {},
});
